@charset "utf-8";
@import "reset";
$font-size:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$font-size*1rem;
}
 //个人中心
      .personal{
          position:absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #222222;
          z-index: 3;
          overflow-x: hidden;
          overflow-y: auto;
          transform: translateX(-100%);
          transition: .5s all ease-out;          
          .register-top-box{
              width: 100%;
              .register-top{
                  padding: r(18px) r(17px) r(17px) r(12px);
                  font-size: 0;
                  border-bottom: 1px solid #484848;
                  .close{
                      display: inline-block;
                      vertical-align: middle;
                      i{
                          font-size: r(50px);
                          color: red;
                      }
                  }
                  form{
                      padding-left: r(78px);
                      display: inline-block;
                      vertical-align: middle;
                      .search{
                          border: 1px solid #FFFFFF;
                          border-radius: 10px;
                          display: inline-block;
                          width: r(483px);
                          height: r(52px);
                          position: relative;
                          i{
                              position: absolute;
                              left: 5px;
                              top: 4px;
                              color: #FFFFFF;
                          }
                      }
                      input[type="search"]{
                          display: inline-block;
                          width: 100%;
                          height: 100%;
                          background-color: #1f1f1f;
                          border: 0;
                          border-radius: 10px;
                          padding-left: r(50px);
                      }
                  }
              }
          }
          .personal-box{
              width: 100%;
              border-bottom: 24px solid #303030;
              padding-top: r(85px);
              font-size: 0;
              .personal-img{
                  position: relative;
                  text-align: center;
                  img{
                      width: r(130px);
                      height: r(130px);
                      border-radius: 50%;
                  }
                  .message{
                      position: absolute;
                      left: r(355px);
                      top: 0;
                      width: r(33px);
                      height: r(33px);
                      background: #FF0000;
                      border-radius: 50%;
                      text-align: center;
                      span{
                          color: #FFFFFF;
                          font-size: 12px;
                          display: inline-block;
                          line-height: 16px;
                      }
                  }
              }
              .personal-text{
                  width: 100%;
                  text-align: center;
                  padding-top: r(15px);
                  .personal-name{
                      width:100%;
                      span{
                          font-size: 24px;
                          color: #FFFFFF;
                          padding-right: r(10px);
                          display: inline-block;
                          vertical-align: middle;
                      }
                      div{
                          display: inline-block;
                          padding: r(2px) r(10px) r(3px) r(12px);
                          border: 1px solid #FFFFFF;
                          span{
                              font-size: 15px;
                          }
                      }
                  }
              }
              .star-box{
                  width: 100%;
                  text-align: center;
                  padding-top: r(8px);
                  padding-bottom: r(11px);
                  .star{
                      display: inline-block;
                      vertical-align: middle;
                      padding-right: r(13px);
                  }
              }
              .fans{
                  width: 100%;
                  text-align: center;
                  .gz{
                      font-size: 22px;
                      color: #FFFFFF;
                      width: r(318px);
                      text-align: right;
                      display: inline-block;
                      border-right: 2px solid #a2a2a2;
                      span{
                          color: #b60005;
                          padding-left: r(9px);
                          padding-right: r(10px);
                      }
                  }
                  .fs{
                      display: inline-block;
                      font-size: 22px;
                      color: #FFFFFF;
                      width: r(322px);
                      text-align: left;
                      padding-left: r(13px);
                      span{
                          color: #b60005;
                          padding-left: r(10px);
                      }
                  }
              }
              .collect-box{
                  width: 100%;
                  text-align: center;
                  font-size: 0;
                  padding: r(20px) 0;
                  .collect{
                      background: #b60005;
                      border-radius: 15px;
                      width: r(218px);
                      height: r(52px);
                      display: inline-block;
                      vertical-align: middle;
                      a{
                          color: #FFFFFF;
                          display: block;
                          font-size: 18px;
                          line-height: 26px;
                      }
                  }
                  .publish{
                      display: inline-block;
                      background:#cdcdcd;
                      border-radius: 15px;
                      width: r(219px);
                      height: r(52px);
                      margin-left: r(22px);
                      vertical-align: middle;
                      a{
                          color: #FFFFFF;
                          display: block;
                          font-size: 18px;
                          line-height: 26px;
                      }
                  }
              }
          }
          .drop-down-box{
              padding-left: r(30px);
              padding-right: r(34px);
              padding-top: r(53px);
              font-size: 0;
              li{
                  &:first-of-type{
                      .drop-down{
                          padding-top: 0;
                      }
                  }
              }
              .drop-down{
                  display: flex;
                  justify-content: space-between;
                  color: #FFFFFF;
                  border-bottom: 2px solid #282828;
                  padding-bottom: r(22px);
                  padding-top: r(34px);
                  span{
                      font-size: 16px;
                      line-height: 32px;
                  }
                  i{
                      display: inline-block;
                      vertical-align: middle;
                      line-height: 32px;
                      padding-right: r(9px);
                  }
                  .down_i{
                        transform: rotate(90deg);
                    }
          }
          .drop-down2{
                      width:100%;
                      padding-left: r(90px);
                      padding-right: r(61px);
                      text-align: center;
                      overflow: hidden;
                      height: 0;
                      transition: all 500ms;
                      li{
                          padding-top: r(32px);
                          padding-bottom: r(31px);
                          border-bottom: 1px solid #262626;
                          a{
                              font-size: 16px;
                              color: #F5F5F5;
                          }
                      }
                  }
                  .down_li{
                    height: 118px;
                    transition: all 500ms;
                }
              }
          .exit{
              width:100%;
              text-align: center;
              font-size: 0;
              padding-top: r(58px);
              padding-bottom: r(39px);
              div{
                  background: #b60005;
                  border-radius: 15px;
                  width: r(172px);
                  height: r(52px);
                  display: inline-block;
                  span{
                      display: inline-block;
                      color: #FFFFFF;
                      font-size: 16px;
                      vertical-align: middle;
                      line-height: 26px;
                  }
              }
          }
      }